<template>
  <div class="right" v-adaptive="{ bottomOffset: 0 }">
    <div class="right_top">
      <!-- <div class="right_top_baseDate">
        组件信息：{{getItem( dragStore.clickItem.type)?.label }}—{{dragStore.clickItem.discribe}}
      </div> -->
      <template v-for="(item, key) in editTypeValue" :key="item">
        <div class="right_top_box" v-if="dragStore.clickItemSettings[key]">
          <div class="right_top_title">{{ editTypeValue[key] }}</div>
          <div :key="index" class="right_top_body" v-for="(itex, index) in dragStore.clickItemSettings[key]">
            <ElFormItem v-if="itex.type != 'valueKeyList'" style="margin-bottom: 0" :label="itex.label">
              <ElInput v-if="itex.type == 'number'" type="number" @focus="(e) => focusFn(e, itex)" @blur="(e) => blurFn(e, itex)" v-model="renderTemplate(itex)[itex.key]" />
              <ElInput v-if="itex.type == 'textarea'" type="textarea" @focus="(e) => focusFn(e, itex)" @blur="(e) => blurFn(e, itex)" v-model="renderTemplate(itex)[itex.key]" style="height: auto" />
              <ElInput v-if="itex.type == 'input'" @focus="(e) => focusFn(e, itex)" @blur="(e) => blurFn(e, itex)" v-model="renderTemplate(itex)[itex.key]" />
              <el-radio-group v-if="itex.type == 'radio'" size="small" :style="{ lineHeight: 'none' }" v-model="renderTemplate(itex)[itex.key]">
                <el-radio-button :label="true">是</el-radio-button>
                <el-radio-button :label="undefined">否</el-radio-button>
              </el-radio-group>
            </ElFormItem>
            <div v-if="itex.type == 'valueKeyList'" class="valueKeyList">
              {{ itex.label }} <el-button type="primary" size="small" plain @click="addParamsList(itex)">新增</el-button>
              <div v-for="(itec, indec) in itex.valueKeyList" class="valueKeyListItem" :key="itec">
                <el-button type="danger" class="valueKeyListItem_delete" size="small" plain @click="deleteParamsList(itex, indec)">删除</el-button>
                <ElFormItem :label="itez.label" v-for="(itez, indez) in itec" :key="itez">
                  <ElInput v-if="itez.type == 'input'" @focus="(e) => focusFn(e, itez)" @blur="(e) => blurFn(e, itez)" v-model="renderTemplate(itez, indec)[itez.key]" />
                </ElFormItem>
              </div>
            </div>
            <div class="tip" v-if="itex.tip">{{ itex.tip }}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { useDrag } from "@/store/modules/drag";
import { ElFormItem } from "element-plus";
import { editTypeValue,getItem } from "@/views/coderCreate/editor/index";
import { deepClone } from "@/assets/utils/deepClone";

const dragStore = useDrag();
let activeName = ref("");
watch(
  () => dragStore.clickItemSettings,
  () => {
    for (let item in editTypeValue) {
      if (dragStore.clickItemSettings[item]) return (activeName.value = item);
    }
  }
);
function blurFn(e, item) {
  let modelObj = item.editType == "high" ? dragStore.clickItem.highEdit : dragStore.clickItem.props;
  let modelObjCopy = item.editType == "high" ? dragStore.clickItemCopy.highEdit : dragStore.clickItemCopy.props;
  let propKey = item.key;
  let nowValue = modelObj[propKey];
  let oldValue = modelObjCopy[propKey];
  if (nowValue == oldValue) return;
  if (propKey == "itemKey") {
    let parent = dragStore.clickParent.parent;
    let currentForm = dragStore.refList[parent.highEdit.ref].dataed.cFormRef.form;
    currentForm[nowValue] = currentForm[oldValue];
    return delete currentForm[oldValue];
  }
  if (propKey == "showAdd") {
    if (dragStore?.refList?.[nowValue])
      return (dragStore.clickItem.methods.showAdd = (row) => {
        dragStore?.refList?.[nowValue].methods.showDialog(row?.row ? row?.row : {});
        return;
      });
    modelObj[propKey] = oldValue;
    return nowValue ? ElMessage.error("不存在showAdd对应的ref值") : "";
  }
  if (propKey == "getListFn" || propKey == "cSearchKey") {
    let cSearchKey = dragStore.clickItem.key == "cSearch" ? dragStore.clickItem.highEdit.ref : modelObj.cSearchKey;
    if (dragStore.refList[nowValue])
      return (dragStore.clickItem.methods.getListFn = async (fn) => {
        await dragStore?.refList[modelObj.getListFn].getListFn(cSearchKey ? dragStore?.refList[cSearchKey].dataed.cFormRef.form : {});
        if (fn?.fn) fn.fn();
      });
    modelObj[propKey] = oldValue;
    return nowValue ? ElMessage.error("不存在getListFn或cSearchKey对应的ref值") : "";
  }
  if (propKey == "ref") {
    if (dragStore.refList[nowValue]) {
      dragStore.clickItem.highEdit[item] = oldValue;
      return ElMessage.error("已存在该ref值");
    }
    dragStore.refList[nowValue] = dragStore.refList[oldValue];
    return delete dragStore.refList[oldValue];
  }
}
function focusFn(e, item) {
  dragStore.clickItemCopy = deepClone(dragStore.clickItem);
}
function renderTemplate(item, indec) {
  let modelKey = item.editType == "high" ? dragStore.clickItem.highEdit : dragStore.clickItem.props;
  if (item.propKey)
    item.propKey.map((ite, index) => {
      let isLast = indec !== undefined && index == item.propKey.length - 1;
      if (!modelKey[ite]) modelKey[ite] = isLast ? [] : {};
      if (isLast && !modelKey[ite][indec]) modelKey[ite][indec] = { name: "1", id: 1 };
      modelKey = isLast ? modelKey[ite][indec] : modelKey[ite];
    });
  return modelKey;
}
function addParamsList(itex) {
  itex.valueKeyList.push(itex.valueKeyList[0]);
  let obj = renderTemplate(itex)[itex.key];
  obj.push(deepClone(obj[0]));
}
function deleteParamsList(itex, indec) {
  itex.valueKeyList.splice(indec, 1);
  let obj = renderTemplate(itex)[itex.key];
  obj.splice(indec, 1);
}
</script>
<style lang="scss" scoped>
.right {
  width: 20%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
  .right_top {
    cursor: pointer;
    margin-bottom: 10px;
    .right_top_baseDate{
      padding: 10px;
      box-sizing: border-box;
    }
    .right_top_box {
      border-radius: 5px;
      box-sizing: border-box;
      padding: 10px;
      margin-bottom: 10px;
      .right_top_title {
        padding-bottom: 10px;
        border-bottom: 1px solid #d4d4d4;
      }
      .right_top_body {
        font-size: 13px;
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 5px;
        .valueKeyList {
          border: 1px solid #cecece;
          padding: 5px 10px;
          border-radius: 5px;
          .valueKeyListItem {
            border-radius: 5px;
            padding: 0px 10px;
            box-sizing: border-box;
            margin: 5px 0;
            .valueKeyListItem_delete {
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
